<template>
	<view class="weekly-container" :style="{'background-image': 'url('+WeeklyBg[weeklyObj.week_day]+')'}">
		<view class="limit-class" :style="{'background-image': 'url('+WeeklyIcon[weeklyObj.week_day]+')'}">
			<view :style="{color: weeklyLimitColor[weeklyObj.week_day]}">
				{{'限购 ' + weeklyObj.buy_limit_num + ' 次'}}
			</view>
			<view :style="{color: weeklyLimitSubColor[weeklyObj.week_day]}">
				{{'已购 '+weeklyObj.has_buy+'/'+weeklyObj.buy_limit_num+' 次'}}
			</view>
		</view>
		<view class="top">
			{{ WeeklyTitle[weeklyObj.week_day] }}
		</view>
		<view class="bottom">
			<view class="bottom-area" :style="{background: bottomBackColor[weeklyObj.week_day]}">
				<view class="left main-start-flex">
					<image :src="WeeklyCommonImg.weeklyIcon"></image>
				</view>
				<view class="right">
					<view class="title-area">
						<view class="title_1" :style="{color: WeeklyTitleColor[weeklyObj.week_day]}">{{ weeklyObj.title }}</view>
						<view class="title_2" :style="{color: WeeklyDescColor[weeklyObj.week_day]}">{{ weeklyObj.sub_title }}</view>
					</view>
					<view class="btn-area">
						<view class="btn main-center-flex" :style="{'background-image': 'url('+WeeklyBtn[weeklyObj.week_day]+')'}">
							<view class="btn-left">
								<view class="btn-title-1">{{ '￥' + weeklyObj.price }}</view>
								<view class="btn-title-2">{{'距结束: ' + countdownTime}}</view>
							</view>
							<view class="btn-right column-center-flex">
								<text class="title_3">马上买</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		WeeklyTitle,
		WeeklyTitleColor,
		WeeklyDescColor,
		WeeklyBg,
		WeeklyBtn,
		WeeklyCommonImg,WeeklyIcon
	} from '../../utils/objectValue';
	import { countDown } from '../../utils/common';

	export default {
		props: {
			weeklyInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				WeeklyTitle,WeeklyTitleColor,WeeklyDescColor,WeeklyBg, WeeklyBtn,WeeklyCommonImg,WeeklyIcon,
				bottomBackColor: {
					1: 'linear-gradient(to bottom, #D6EEFF 100%, #FFFFFF 100%)',
					2: 'linear-gradient(to bottom, #FFE7E8 100%, #FFFFFF 100%)',
					3: 'linear-gradient(to bottom, #E1F8FF 100%, #FFFFFF 100%)',
					4: 'linear-gradient(to bottom, #FFFCF4 100%, #FFFFFF 100%)',
					5: 'linear-gradient(to bottom, #FFFCF4 100%, #FFFFFF 100%)',
					6: 'linear-gradient(to bottom, #FFFCF4 100%, #FFFFFF 100%)',
					7: 'linear-gradient(to bottom, #FFECFC 100%, #FFFFFF 100%)',
				},
				countdownTime: '',
				timer: null,
				weeklyLimitColor: {
					1: 'rgba(127, 86, 255, 1)',
					2: '#D75DD0',
					3: '#1C8ECD',
					4: '#F96D28', 
					5: 'rgba(21, 128, 154, 1)',
					6: '#835C00',
					7: '#BD57FF',
				},
				weeklyLimitSubColor: {
					1: 'rgba(34, 34, 34, 1)',
					2: '#222222',
					3: '#007EC6',
					4: '#BF6029', 
					5: 'rgba(1, 174, 215, 1)',
					6: '#835C00',
					7: '#FF57F8',
				},
			};
		},
		computed: {
			weeklyObj() {
				return this.weeklyInfo && Object.keys(this.weeklyInfo).length ? this.weeklyInfo : {};
			},
		},
		created() {
			this.timer = setInterval(() => {
				this.countdownTime = countDown();
			}, 1000);
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
.weekly-container {
	width: 100%;
	height: 372rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	.limit-class{
		position: absolute;
		top: 22rpx;
		right: 32rpx;
		width: 198rpx;
		height: 98rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: BTH;
		font-weight: 500;
		color: #7A3C3C;
		view:first-child{
			overflow-wrap: break-word;
			font-size: 18px;
			font-family: PingFang SC-Semibold;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			line-height: 18px;
		}
		view:last-child{
			margin-top: 8rpx;
			overflow-wrap: break-word;
			font-size: 12px;
			font-family: PingFang SC-Regular;
			font-weight: NaN;
			text-align: center;
			white-space: nowrap;
		}
	}
	.top{
		width: 100%;
		height: 100rpx;
		font-size: 54rpx;
		padding-left: 25rpx;
		font-family: BTH;
		color: #ffffff;
		display: flex;
		align-items: center;
	}
	.bottom{
		width: 100%;
		height: calc(100% - 100rpx);
		padding: 0 20rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
	}
	.bottom-area{
		width: 100%;
		height: 100%;
    	border-radius: 10rpx;
		display: flex;
		align-items: center;
	}
	.left{
		width: 43%;
		image{
			width: 280rpx;
			height: 224rpx;
		}
	}
	.right{
		width: 57%;
		display: flex;
		flex-direction: column;
	}
	.title-area{
		height: 50%;
		display: flex;
		flex-direction: column;
	}
	.title_1{
		font-size: 44rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		/* #ifndef APP-PLUS */
		font-weight: 600;
		/* #endif */
		/* #ifdef APP-PLUS */
		font-weight: 750;
		/* #endif */
	}
	.title_2{
		font-size: 28rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		padding-top: 7rpx;
	}
	.btn-area{
		height: 50%;
		padding-top: 15rpx;
	}
	.btn{
		width: 341rpx;
		height: 104rpx;
		background-size: 100% 100%;
	}
	.btn-left{
		width: 58%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.btn-right{
		width: 42%;
		height: 100%;
	}
	.btn-title-1{
		font-size: 42rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 600;
		color: #F9606F;
	}
	.btn-title-2{
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #F9606F;
	}
	.title_3{
		font-size: 42rpx;
		font-family: BTH;
		font-weight: 400;
		color: #FFFFFF;
	}
}
</style>